<template>
  <div class="WidgetPropertiesGroup">
    <div class="label">
      <span>{{propsGroup.name}}</span>
    </div>
    <div>
      <div v-for="propsSchema in propsSchemas" :key="propsSchema.prop">
        <PropertyItem
          v-if="propsSchema.type === 'string'"
          type="string"
          :label="propsSchema.name"
          :prop="propsSchema.prop"
          :object="widgetConfig"
        />
      </div>
    </div>
  </div>
</template>
<script lang="ts">
import { PropsGroup } from '@/core/model/WidgetDefinition'
import { Component, Prop, Vue } from 'vue-property-decorator'
import WidgetConfig from '@/core/model/WidgetConfig'
import PropertyItem from './property-item/PropertyItem.vue'

@Component({
  components: { PropertyItem }
})
export default class WidgetPropertiesGroup extends Vue {
  @Prop()
  public propsGroup!: PropsGroup

  @Prop({ type: Object, required: true })
  private widgetConfig!: WidgetConfig

  private get propsSchemas() {
    return this.propsGroup.propsSchemas
  }

}
</script>
<style scoped lang="scss">
@import '~@/style/variables.scss';
.WidgetPropertiesGroup {
  border-top: solid 1px rgba($border-color, 1);
  padding: 5px 10px;
  .label {
    height: 24px;
    line-height: 24px;
    color: $text-color-gray;
    margin-bottom: 5px;
  }
}
</style>
